import React, {Component} from 'react';
import {
    View,
    Text,
    FlatList,
    ToastAndroid,
    Image,
    StyleSheet,
    TouchableOpacity,
} from 'react-native';

var navigation;
var dimensions = require('Dimensions');
//获取屏幕的宽度
var {width} = dimensions.get('window');
var columns = 2;//每一行显示多少列
var itemWidth = width / columns;//每一个item所占的宽度
export default class Mine extends Component {

    static defaultProps = {
        url: 'https://news-at.zhihu.com/api/4/news/latest'
    };

    constructor(props) {
        super(props);
        this.state = {
            data: [],//存储列表使用的数据
            refreshing: false,//当前的刷新状态
        };
        this.componentDidMount = this.componentDidMount.bind(this);
    }

    render() {
        navigation = this.props.navigation;
        return (
            <View style={styles.container}>
                <FlatList
                    data={this.state.data}
                    keyExtractor={this.keyExtractor}
                    renderItem={this.getView}

                    //指定为GridView效果，需要下面两个属性同时设置，且numColumns必须大于1
                    numColumns={columns}
                    columnWrapperStyle={{borderWidth: 1, borderColor: 'white'}}
                />
            </View>
        );
    }


    /**
     * item
     * @returns {XML}
     */
    getView({item}) {
        //这里返回的就是每个Item
        return (
            <TouchableOpacity activeOpacity={0.5}
                              onPress={() => navigation.navigate('Details')}>
                <View style={styles.item}>
                    {/*左边的图片*/}
                    <Image source={{uri: item.images[0]}} style={styles.image}/>
                    <View style={styles.left}>
                        {/*右边的View*/}
                        <Text style={{
                            marginTop: 5, color: '#333333', justifyContent: 'center',
                            alignItems: 'center',
                        }}>{item.title}</Text>
                    </View>
                </View>
            </TouchableOpacity>
        )
    };

    /**
     * 给列表设置id
     * @param item
     * @param index
     */
    keyExtractor = (item, index) => item.id;


    /**
     * json 数据实体类
     */
    ItemData(images, title, id) {
        this.images = new Array(images);
        this.title = title;
        this.id = id;
    }

    //渲染完成，请求网络数据
    componentDidMount() {
        fetch(this.props.url)
            .then((response) => response.json())
            .then((response) => {
                //解析json数据
                var json = response['stories'];
                //更新状态机
                this.setState({
                    data: json,
                    refreshin: true
                });
            })
            .catch((error) => {
                if (error) {
                    //网络错误处理
                    console.log('error', error);
                }
            });
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#F5FCFF',
    },

    containertext: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    item: {
        flexWrap: 'wrap',
        flexDirection: 'row',
        borderRadius: 5,
        backgroundColor: 'white',
        marginTop: 8,
        marginLeft: 5,
        width: itemWidth,
    },
    image: {
        width: 50,
        height: 50,
        borderBottomLeftRadius: 5,
        borderTopLeftRadius: 5,
    },
    left: {
        flex: 1,
        marginLeft: 8,
        flexDirection: 'column',
        alignItems: 'flex-start',
    },
    //让 Text 水平方向充满容器
    content: {
        bottom: 10,
        marginRight: 16,
        position: 'absolute',
        flexDirection: 'row',
        justifyContent: 'flex-end',
    }
});